<template>
  <view
    class="bg-white rounded-[28rpx] p-[32rpx] shadow-md relative flex flex-col hover:shadow-lg transition-all duration-300"
  >
    <view class="absolute top-[1rpx] right-[1rpx] bg-[#03a9f4] text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-[6rpx]">
      {{ change(item) }}
    </view>
    <!-- 头部 -->
    <view class="flex justify-between items-start mb-[18rpx]">
      <view class="flex-1">
        <view class="text-[32rpx] font-bold text-[#222] truncate flex item-start">
          <image v-if="recruitmentType == 1" class="mr-2 w-[40rpx] h-[40rpx]" :src="te"/>
          <text>{{ item.jobTitle }}</text>
          
        </view>
        <view class="text-[24rpx] text-[#666] mt-[4rpx]">
          {{ item.factoryName }} | {{ item.workCity }}
        </view>
      </view>
    </view>

    <!-- 岗位信息 -->
    <view class="flex gap-[10rpx] mb-[18rpx] text-[24rpx] text-[#666]">
      <view>薪资：
        <text class="text-[#ff0000]"> {{ item.salary_min }}-{{ item.salary_max }}元</text>
      </view>
      <!-- <view>招聘人数：{{ item.recruitNum }}人</view> -->
      <view class="ml-auto">经验要求：{{ item.experience }}</view>
    </view>
    <view class="text-[24rpx] text-[#666]">职位描述：{{ item.description }}</view>
    <!-- 元信息 -->
    <view class="flex justify-between text-[22rpx] text-[#999] my-[18rpx]">
      <view>发布时间：{{ dayjs(item.publishTime).format('MM-DD') }}</view>
    </view>

    <!-- 底部操作 -->
    <view
      class="flex items-center justify-end mt-[10rpx] pt-[10rpx] border-t border-[#f5f7fa] gap-[12rpx]"
    >
      <!-- 查看申请者按钮 - 仅在招聘中状态显示 -->
      <nut-button
        size="small"
        type="info"
        @click.stop="handleViewDetails"
        class=""
      >
        查看申请者
      </nut-button>
      
      <!-- 编辑岗位按钮 -->
      <nut-button
        size="small"
        type="warning"
        @click.stop="handleEdit"
        v-if="item.status !== 2"
        class=""
      >
        编辑岗位
      </nut-button>
      <nut-button
        size="small"
        type="danger"
        @click.stop="handleDelete"
        v-if="item.status != 5"
      >
        结束招聘
      </nut-button>
      <nut-button
        size="small"
        type="danger"
        disabled
        class="bg-[#f44336] border-none"
        v-else
      >
        已取消
      </nut-button>
      <!-- 标记招满按钮 -->
      <!-- <nut-button
        size="small"
        type="warning"
        @click.stop="handleMarkFull"
        v-if="item.status === 1"
        class="!bg-[#ff9800] !border-[#ff9800] !rounded-[8rpx] !py-[10rpx] !font-medium hover:!bg-[#f57c00]"
      >
        ✓ 标记招满
      </nut-button> -->
    </view>
  </view>
</template>

<script setup>
import { IconFont } from "@nutui/icons-vue-taro";
import { Button as nutButton } from "@nutui/nutui-taro";
import dayjs from "dayjs";
import te from  '@/assets/pic/te.png'

const props = defineProps({
  recruitmentType:{
    type: Number,
  },
  item: {
    type: Object,
    required: true,
    default: () => ({
      jobTitle: "", // 岗位名称
      factoryName: "", // 工厂名称
      workCity: "", // 工作城市
      status: 0, // 招聘中/已招满
      statusClass: "",
      salary_max: "", // 薪资范围
      salary_min: "", // 薪资范围
      salaryType: "", // 月薪/年薪
      recruitNum: 0, // 招聘人数
      experience: "", // 经验要求
      education: "", // 学历要求
      pay_number: 0, // 收到简历数
      interviewCount: 0, // 已面试数
      hireCount: 0, // 已录用数
      publishTime: "", // 发布时间
      updateTime: "", // 更新时间
      description:"" //职位描述
    }),
  },
});

const emit = defineEmits(["viewDetails", "edit", "markFull", "viewApplicants", "delete"]);

const handleDelete = () => emit("delete", props.item);

//状态转换方法
const change = (item) =>{
  console.log("item为",item)
  if (item.releaseStatus) {
    switch (item.releaseStatus) {
      case 1:
        return "待支付";
      case 2:
        return "审核中";
      case 3:
        return "招聘中";
      case 4:
        return "审核不过";
      case 5:
        return "停止招聘";
      default:
        break;
    }
  }

  switch (item){
    case 1:
          return "招聘中";
    case 2:
          return "停止招聘"
    case 0:
      return "未知状态";
  }
}


const handleViewDetails = () => emit("viewDetails", props.item);
const handleEdit = () => emit("edit", props.item);
const handleMarkFull = () => emit("markFull", props.item);
</script>